IconBuilder Pro is the tool we use to create all the icon sets available at the Iconfactory. The foreman has a cookbook full of recipes that he uses to concoct his iconic treats, and he shares a few of them in this section. These recipes will get you started making your own icons.
For more hints and tips for using IconBuilder Pro, please visit the IconBuilder FAQ page at www.iconfactory.com
Thumbnail Icon for Mac OS X
w do you suggest I make my first icon with IconBuilder?
Here is a simple recipe for making a 128 x 128 pixel icon for Mac OS X:
窶｢ In Adobe Photoshop, create a new 128 x 128 pixel document.
窶｢ Within that document create a new, blank layer on which to work.
窶｢ Create (draw or paste in) your icon. You may find it useful to use tools outside of Photoshop to create the iconic image. Some artist find that 3D tools can help, others find vector drawing tools useful. Drawing individual pixels in the icon can become tedious. :-)
窶｢ Make sure to fully erase any stray pixels outside of the icon's outline. An easy way to do this is to turn off the Background layer so you can see your transparent "checkerboard" pattern under your layer.
窶｢ Select all.
窶｢ Run IconBuilder Pro from the "Filters" menu.
窶｢ Once inside IconBuilder Pro, select the "All Mac OS" format. We recommend that you don't use the Mac OS X format yet, since it can cause the Mac OS X Finder to crash. The "All Mac OS" format also has the advantage of showing up on your Mac OS 9 desktop (if you include a 32 x 32 pixel icon.)
窶｢ Click on the Aqua tab to display the thumbnail icon and slider.
窶｢ Press the "QuickBuild邃｢" button to move the data in your Photoshop layer into the icon.
窶｢ Click on the center of the icon. While holding the button down, drag your mouse away from the center. The size will decrease as you move away; this simulates the way the icon will displayed in the Mac OS X dock.
窶｢ Click on one of the tick marks on the slider. The icon will resize and update the size and percentage values. You can also press on the handles at either end of the the slider to smoothly scroll between the minimum and maximum sizes. If you hold down the mouse button, you can resize the icon manually.
窶｢ Click on the Grid tab to display the smaller versions of the icon.
窶｢ Press the "QuickBuild邃｢" button to move the data in your Photoshop layer into the grid.
窶｢ Click on the "Save" button, name your file and save it to your Mac's desktop.
窶｢ Click the "Done" button to exit IconBuilder Pro and go back to Photoshop. Now all you need is Mac OS X! :-)
32-bit Icon for Mac OS 9
w do you suggest I make my first icon with IconBuilder?
Here is a very simple, step-by-step recipe for making a 32-bit icon for the Mac OS 9 and earlier:
窶｢ In Adobe Photoshop, create a new 48 x 48 pixel document.
窶｢ Within that document create a new, blank layer on which to work.
窶｢ Create (draw or paste in) your icon. Get it shaded and cropped correctly. Make sure to fully erase any stray pixels outside of the icon's outline. An easy way to do this is to turn off the Background layer so you can see your transparent "checkerboard" pattern under your layer.
窶｢ Select all.
窶｢ Run IconBuilder Pro from the "Filters" menu.
窶｢ Once inside IconBuilder Pro, select the "All Mac OS" format. Then click the "QuickBuild邃｢" button and watch the various cells of the icon grid fill up. You'll note that it created the small or 16x16 pixel icons for you as well. It's possible that the position of these sizes isn't where you expected.
窶｢ Click to select the 32-bit, small icon cell.
窶｢ Use the keyboard's arrow keys to move the icon around until you get the cropping you want.
窶｢ Press and hold the "Shift" key and with the mouse, click the "QuickBuild" button again. IconBuilder Pro rebuilds the entire column for you using this newly aligned small icon.
窶｢ Click on the "Save" button, name your file and save it to your Mac's desktop.
窶｢ Click the "Done" button to exit IconBuilder Pro and go back to Photoshop. You're done!
An Icon for Windows
w do you suggest I make my first icon with IconBuilder?
Here is a very simple, step-by-step recipe for making a 32-bit icon for the Mac:
窶｢ Follow the steps described above for making the Mac icon. After you save the Mac icon, use these additional steps.
窶｢ Run IconBuilder Pro from the "Filters" menu.
窶｢ Select the "Windows" format. Click on the "QuickBuild" button and the grid will fill up with Windows versions of the icon.
窶｢ Click on the "Save" button and name your file (using .ICO as a suffix so the PC will recognize it.) If you have a file server for Windows, you can save it directly onto the server and view it from Windows. Otherwise, save it your Mac's desktop and copy it to the PC manually.
窶｢ Use ICONTEST to check the icon on the PC. For more information on ICONTEST and other aspects of creating icons for Windows, please see our Windows Guide in the IconBuilder Pro folder or on the Iconfactory website.
An Application Folder
Do you have an application who's folder icon looks terrible in a Finder view with the new 32-bit icons?
This recipe will create a new 32-bit folder icon for an application:
窶｢ Start out with two blank layers. One layer will hold the folder icon and the other will hold the application icon. Make sure both layers are visible.
窶｢ Run IconBuilder Pro on the bottom-most layer.
窶｢ Import a blank folder icon from your Mac's desktop (use the Choose button when you see the one you want). This folder will be used as a template. Select the "large/32-bit" in the center icon grid. Next, use the "Apply View to Photoshop Layer" button and you'll see the icon appear in the blank layer out in Photoshop.
窶｢ Select the top-most layer and run IconBuilder Pro again.
窶｢ Next, click the Import button and select the application icon that will eventually go on top of the folder you're creating. Select a "small" version of this icon from the grid and click the "Apply" button again.
窶｢ Back out in Photoshop, move the small icon in the top layer around until it's lined up where you want it. Then, Merge the two visible layers into one.
窶｢ Run IconBuilder Pro on the combined layer.
窶｢ Do a QuickBuild邃｢ and save your new icon.
窶｢ In the Finder, copy the new icon using Get Info. You can then paste the icon on the applications folder.
Better Looking Small Icons
IconBuilder Pro crops when it's creating the 16x16 small version of the icon. For those of you who want a scaled version of 32x32 large icon, you can run through these steps:
窶｢ Create large icon on a Photoshop layer.
窶｢ Run IconBuilder Pro. Do a QuickBuild for the large versions (select one of the large icons and use Shift-QuickBuild).
窶｢ Use "Save" to put the large version of the icon in a file. Click on "Done" to return to Photoshop.
窶｢ Duplicate the layer with your large icon.
窶｢ Take duplicate layer and scale it down. The easiest way is with Layer -> Transform -> Numeric. You can experiment with the "Scale" parameters; 50% for width and height is a good place to start.
窶｢ Run IconBuilder Pro on the duplicate layer (with the scaled down version of your icon). The last version of your icon, with the large icons, will load automatically
窶｢ Select one of the empty cells for the small icons and do a Shift-QuickBuild. You can now "Save" the completed icon.
